<template>
	<view>
		<u-navbar title="选择项目" :autoBack="true" :placeholder="true" />
		<view class="usearch">
			<u-search shape="square" :showAction="false" @search="onSearch" :clearabled="false"></u-search>
		</view>
		<view class="ulist">
			<u-list :height="scrollHeight">
				<u-list-item v-if="projectList.length > 0" v-for="(item, index) in projectList" :key="index">
					<view class="list-item" @click="onClickitem(index)">
						<image class="img" :src="item.image || '../../../static/images/logo/logo.png'"></image>
						<view class="dbx">
							<view class="title">{{item.name}}</view>
							<view class="desc">
								<view class="desc-itm">{{item.onLine?'已开启':'已关闭'}}</view>
							</view>
							<view class="prbx">
								<view class="price">
									<text>￥</text>
									<text class="num">{{item.price}}</text>
								</view>
								<view class="rti">已预约{{item.subscribeCount}}</view>
							</view>
						</view>
					</view>
				</u-list-item>
				<u-empty v-else mode="list" />
			</u-list>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data(){
			return {
				scrollHeight:0, //元素的所需高度
				projectList:[],
				condition:{
					page: 1,
					limit: 10,
					where: '',
					// storeId: this.userStore.id
				}
			}
		},
		onLoad() {
			this.getProjects()
		},
		onReady() {
			let _this = this;
			uni.getSystemInfo({ //调用uni-app接口获取屏幕高度
				success(res) { //成功回调函数
					let wHeight=res.windowHeight //windoHeight为窗口高度，主要使用的是这个
					let titleH=uni.createSelectorQuery().select(".ulist"); //想要获取高度的元素名（class/id）
					titleH.boundingClientRect(data=>{
							_this.scrollHeight=wHeight-data.top  //计算高度：元素高度=窗口高度-元素距离顶部的距离（data.top）
					}).exec()
				}
			}) 
		},
		computed:{
			...mapState(['userStore']),
		},
		methods: {
			// 获取项目列表
			getProjects(){
				this.$u.api.projectList({...this.condition, storeId:this.userStore.id}).then(res=>{
					this.projectList = res.data
				})
			},
			onSearch(val){
				this.condition =  this.$options.data().condition
				this.condition.where = val
				this.getProjects()
			},
			// 选择项目
			onClickitem(index){
				uni.$emit('project',{...this.projectList[index]})
				uni.navigateBack()
			}
		}
	}
</script>
<style>
	page{
		background-color:#fff;
	}
</style>
<style lang="scss" scoped>
	.usearch{
		padding: 12rpx 20rpx;
	}
	.list-item{
		border: 1px #f7f7f7 solid;
		margin: 0 20rpx 20rpx 20rpx;
		border-radius:10rpx;
		padding: 20rpx;
		display:flex;
		.img{
			width: 160rpx;
			height:160rpx;
			border-radius:10rpx;
			flex-shrink: 0;
		}
		.dbx{
			margin-left: 20rpx;
			width: 100%;
			.title{
				font-weight: 600;
			}
			.desc{
				margin-top: 10rpx;
				display:flex;
				.desc-itm{
					padding: 6rpx 16rpx;
					font-size: 24rpx;
					color:#2b85e4;
					border:1px #2b85e4 solid;
					border-radius:10rpx;
				}
			}
			.prbx{
				margin-top: 10rpx;
				display:flex;
				font-szie:24rpx;
				align-items: center;
				.price{
					color:#fa3534;
					.num{
						font-size: 40rpx;
					}
				}
				.rti{
					color:#333;
					margin-left:20rpx;
				}
			}
		}
	}
</style>